<template>
  <div class="Info">
    <!-- Tab选项 -->
    <div class="Info_tab">
      <div class="Info_tab_box">训练</div>
      <div class="Info_tab_box active">跑步</div>
      <div class="Info_tab_box">行走</div>
      <div class="Info_tab_box">骑行</div>
      <div class="Info_tab_another">签到</div>
    </div>

    <!-- 可视化数据图表 -->
    <div class="myEcharts">
      <div ref="chart" style="height: 360px"></div>
    </div>

    <!-- 今日目标 -->
    <div class="today">
      <div class="today_top">
        <div>今日目标</div>
        <div class="boderLeft"></div>
      </div>
      <div class="today_bottom">
        <div class="pBox">
          <div>已跑3km</div>
          <div>已运动40分钟</div>
        </div>

        <!-- 手搓圆环 -->
        <div class="mycicle_today">
          <div class="content">70%</div>
        </div>
      </div>
    </div>

    <!-- 本周目标 -->
    <div class="thisWeek">
      <div class="thisWeek_top">
        <div>本周目标</div>
        <div class="boderLeft"></div>
      </div>
      <div class="thisWeek_bottom">
        <div class="pBox">
          <div>已跑12km</div>
          <div>已运动180分钟</div>
        </div>

        <!-- 手搓圆环 -->
        <div class="mycicle_week">
          <div class="content">90%</div>
        </div>
      </div>
    </div>

    <!-- 本月目标 -->
    <div class="thisMonth">
      <div class="thisMonth_top">
        <div>本月目标</div>
        <div class="boderLeft"></div>
      </div>
      <div class="thisMonth_bottom">
        <div class="pBox">
          <div>已跑49km</div>
          <div>已运动720分钟</div>
        </div>

        <!-- 手搓圆环 -->
        <div class="mycicle_month">
          <div class="content">100%</div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="app_nav">
      <router-link :class="addActiveFn('/')" to="/">主页</router-link>
      <router-link :class="addActiveFn('/train')" to="/train">训练</router-link>
      <router-link
        :class="[addActiveFn('/echartsview01'), 'sport']"
        to="/echartsview01"
        >Sport</router-link
      >
      <router-link :class="addActiveFn('/community')" to="/community"
        >社区</router-link
      >
      <router-link :class="addActiveFn('/persional')" to="/persional"
        >我的</router-link
      >
    </div>
  </div>
</template>

<script>
// 引入生命钩子函数和 ref 响应式方法绑定数据图表
import { onMounted, ref } from "vue";
// 引入所有的echars可视化数据表
import * as echarts from "echarts";

export default {
  // 在 Vue 3 Composition API 的入口函数，用于组件的设置和初始化。
  setup() {
    const chart = ref(null);

    onMounted(() => {
      // 初始化 ECharts 实例
      const chartInstance = echarts.init(chart.value);

      // echas可视化数据图表的配置选项
      const newData = {
        value: 80,
        name: "当前学校总数",
        max: 100,
      };
      const option = {
        //你的代码
        backgroundColor: "#000",
        title: [
          {
            text: newData.name,
            x: "50%",
            y: "55%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "22",
              fontFamily: "SourceHanSansCN-Medium",
              color: "#ffffff",
            },
          },
          {
            text: newData.value,
            x: "49%",
            y: "40%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: "40",
              fontFamily: "SourceHanSansCN-Medium",
              color: "#66FFFF",
            },
          },
        ],
        angleAxis: {
          show: false,

          max: (newData.max * 360) / 270, //-45度到225度，二者偏移值是270度除360度

          type: "value",

          startAngle: 225, //极坐标初始角度

          splitLine: {
            show: false,
          },
        },

        barMaxWidth: 18, //圆环宽度

        radiusAxis: {
          show: false,

          type: "category",
        },

        //圆环位置和大小

        polar: {
          center: ["50%", "50%"],

          radius: "120%",
        },
        series: [
          // 最外层圆环形
          {
            type: "gauge",
            radius: "92%", // 1行3个
            center: ["50%", "50%"],
            splitNumber: 10,
            // min: 0,
            max: 100,

            startAngle: 225,
            endAngle: -45,
            z: 99,

            // 线
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, "rgba(255,255,255,0)"]],
              },
              detail: {
                formatter: "{value}",
              },
              data: [
                {
                  value: 50,
                  name: "SCORE",
                },
              ],
            },
            // //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5, //刻度的段落数
              lineStyle: {
                color: "#103781",
                width: 1, //刻度的宽度
              },
              length: 25, //刻度的长度
            },
            splitLine: {
              //文字和刻度的偏移量
              show: false,
            },
            //刻度线文字
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },

            title: {
              // 仪表盘标题。
              show: false,
            },
          },
          // 第二层带分界线圆环
          {
            type: "gauge",
            radius: "75%", // 1行3个
            center: ["50%", "50%"],
            splitNumber: 10,
            // min: 0,
            max: 100,

            startAngle: 225,
            endAngle: -45,
            z: 99,

            // 线
            axisLine: {
              lineStyle: {
                width: 1,
                color: [[1, "rgba(255,255,255,0)"]],
              },
              detail: {
                formatter: "{value}",
              },
              data: [
                {
                  value: 50,
                  name: "SCORE",
                },
              ],
            },
            // //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 5, //刻度的段落数
              lineStyle: {
                color: "#103781",
                width: 2, //刻度的宽度
                shadowColor: "#67FFFC",
                shadowBlur: 1,
              },
              length: 4, //刻度的长度
            },
            splitLine: {
              //文字和刻度的偏移量
              show: true,
              length: -15, //长度
              distance: 11,
              lineStyle: {
                color: "#66FFFF",
                width: 3,
              },
            },
            // 刻度线文字
            axisLabel: {
              show: false,
              // color: "#fff",
              // fontSize: 10,
              // distance: 10,
            },
            data: [
              {
                value: newData.value,
                name: "SCORE",
                itemStyle: {
                  color: "#103781",
                },
              },
            ],
            pointer: {
              show: false,
              length: "12%",
              radius: "50%",
              width: 10, //指针粗细
              offsetCenter: [0, -273],
            },
            detail: {
              show: false,
            },
            title: {
              // 仪表盘标题。
              show: false,
            },
          },
          {
            type: "bar",

            data: [
              {
                //上层圆环，显示数据

                value: newData.value,

                // itemStyle: {
                // 	// color: "#1598FF",
                // },
              },
            ],
            itemStyle: {
              borderRadius: "50%",

              opacity: 1,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(95, 186, 255, 0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(13, 86, 234, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            barGap: "-100%", //柱间距离,上下两层圆环重合

            coordinateSystem: "polar",

            roundCap: true, //顶端圆角

            z: 3, //圆环层级，同zindex
          },
          {
            //下层圆环，显示最大值

            type: "bar",

            data: [
              {
                value: newData.max,

                itemStyle: {
                  color: "#1598FF",

                  opacity: 0.2,

                  borderWidth: 0,
                },
              },
            ],

            barGap: "-100%",

            coordinateSystem: "polar",

            roundCap: true,

            z: 1,
          },
        ],
      };

      // 将配置选项应用到 ECharts 实例中，完成图表的绘制和设置
      chartInstance.setOption(option);
    });

    return { chart };
  },

  methods: {
    addActiveFn(route) {
      return this.$route.path === route ? "active" : "";
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes lofing {
  to {
    transform: rotate(360deg);
  }
}

.Info {
  background-color: #061439;
  color: gray;
  padding: 0 0 80px 0;

  .Info_tab {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .Info_tab_box {
      padding: 15px 0 8px 0;
      &.active {
        border-bottom: 1px solid white;
      }
    }

    .Info_tab_another {
      color: white;
      background-color: #01b3de;
      border-radius: 5px;
      padding: 5px 15px;
      position: absolute;
      right: 10px;
      bottom: -40px;
      z-index: 10;
    }
  }

  .today,
  .thisWeek,
  .thisMonth {
    padding: 10px 5px;

    .today_top,
    .thisWeek_top,
    .thisMonth_top {
      position: relative;
      padding: 0 0 0 15px;

      div {
        &:nth-child(1) {
          font-size: 18px;
          font-weight: 700;
          color: white;
        }
      }

      .boderLeft {
        width: 4px;
        height: 20px;
        background: #01b3de;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -8px;
      }
    }

    .today_bottom,
    .thisWeek_bottom,
    .thisMonth_bottom {
      width: 100%;
      height: 90px;
      // background: aqua;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin: 10px 0 0 0;

      .pBox {
        div {
          display: flex;
          justify-content: start;
          align-items: center;
          margin: 5px 0;
        }
      }

      .mycicle_today {
        position: absolute;
        top: 50%;
        left: 50%;
        // background: aqua;
        border-radius: 50%;
        height: 70px;
        width: 70px;
        margin-top: -35px;
        margin-left: -140px;

        .content {
          width: 70px;
          height: 100%;
          // background: transparent;
          background: white;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: 700;
          position: relative;
          z-index: 0;
          overflow: hidden;

          &::before {
            content: "";
            display: block;
            inset: -10px;
            background: #061439;
            position: absolute;
            background-image: conic-gradient(#061439, #01b3de, #061439 70%);
            z-index: -5;
          }

          &::after {
            content: "";
            display: block;
            inset: 3px;
            position: absolute;
            background-color: #061439;
            border-radius: 50%;
            z-index: -3;
          }
        }
      }

      .mycicle_week {
        position: absolute;
        top: 50%;
        left: 50%;
        // background: aqua;
        border-radius: 50%;
        height: 70px;
        width: 70px;
        margin-top: -35px;
        margin-left: -140px;

        .content {
          width: 70px;
          height: 100%;
          // background: transparent;
          background: white;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: 700;
          position: relative;
          z-index: 0;
          overflow: hidden;

          &::before {
            content: "";
            display: block;
            inset: -10px;
            background: #061439;
            position: absolute;
            background-image: conic-gradient(#061439, #01b3de, #061439 90%);
            z-index: -5;
          }

          &::after {
            content: "";
            display: block;
            inset: 3px;
            position: absolute;
            background-color: #061439;
            border-radius: 50%;
            z-index: -3;
          }
        }
      }

      .mycicle_month {
        position: absolute;
        top: 50%;
        left: 50%;
        // background: aqua;
        border-radius: 50%;
        height: 70px;
        width: 70px;
        margin-top: -35px;
        margin-left: -140px;

        .content {
          width: 70px;
          height: 100%;
          // background: transparent;
          background: white;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          font-weight: 700;
          position: relative;
          z-index: 0;
          overflow: hidden;

          &::before {
            content: "";
            display: block;
            inset: -10px;
            background: #061439;
            position: absolute;
            background-image: conic-gradient(#01b3de, #01b3de, #01b3de);
            z-index: -5;
          }

          &::after {
            content: "";
            display: block;
            inset: 3px;
            position: absolute;
            background-color: #061439;
            border-radius: 50%;
            z-index: -3;
          }
        }
      }
    }
  }

  .app_nav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 70px;
    background: #051338;
    border-radius: 30px 30px 0 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 18px;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0 10px rgba(0, 255, 255,1);

    a {
      color: white;
      text-decoration: none;
      font-size: 18px;
      font-weight: 700;
    }

    .active {
      color: aqua;
    }

    .sport {
      font-size: 20px;
      position: relative;
      z-index: 0;
      overflow: hidden;
      width: 100px;
      height: 40px;
      border-radius: 10px;
      text-align: center;
      box-sizing: border-box;
      // padding: 5px 0 0 0;

      &::before {
        content: "";
        inset: -50px;
        // background: gray;
        position: absolute;
        animation: lofing 2s linear infinite;
        color: transparent;
        background-image: conic-gradient(transparent, aqua, transparent 20%);
        z-index: -5;
      }

      &::after {
        content: "";
        inset: 2px;
        background: #051338;
        position: absolute;
        border-radius: 10px;
        z-index: -3;
      }
    }
  }
}
</style>
